<!DOCTYPE html>
<html lang="en">

<head>
	<title>
		<%= title %>
	</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css">
	<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="/stylesheets/animate.min.css" rel="stylesheet">

	<script src="/lib/jquery/dist/jquery.min.js"></script>
	<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body>
	<!-- banner -->
	<!-- flag : 1首页   2 为数学页！只是为了去掉不用的部分	-->
	<%- include("../main/banner",{flag:1})  %>
		<!-- portfolio -->
		<div class="portfolio">
			<div class="container">
				<h3 class="head head2">算
					<span>爱
						<i>数学</i>系列</span>
				</h3>
				<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active">
							<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">十以内加法</a>
						</li>
						<li role="presentation">
							<a href="#learning" role="tab" id="learning-tab" data-toggle="tab" aria-controls="learning">二十以内加法</a>
						</li>
						<li role="presentation">
							<a href="#playing" role="tab" id="playing-tab" data-toggle="tab" aria-controls="playing">五十以内加法</a>
						</li>
						<li role="presentation">
							<a href="#painting" role="tab" id="painting-tab" data-toggle="tab" aria-controls="painting">一百以内</a>
						</li>
						<li role="presentation">
							<a href="#school" role="tab" id="school-tab" data-toggle="tab" aria-controls="school">自定义</a>
						</li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div onload="alert(1);" role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
							<div class="w3_tab_img">
								<!--0-10 -->
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="learning" aria-labelledby="learning-tab">
							<div class="w3_tab_img">
								<!--0-20 -->
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="playing" aria-labelledby="playing-tab">
							<div class="w3_tab_img">
								<!--0-50 -->
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="painting" aria-labelledby="painting-tab">
							<div class="w3_tab_img">
								<!--0-100 -->
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="school" aria-labelledby="school-tab">

							<div style="padding: 10px;">
								<div class="input-group input-group-sm">
									<span class="input-group-addon">题量</span>
									<input type="number" class="form-control">
									<span class="input-group-addon">最小值</span>
									<input type="number" class="form-control">
									<span class="input-group-addon">最大值</span>
									<input type="number" class="form-control">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" id="ask">点我出题</button>
									</span>
								</div>
							</div>

							<div class="w3_tab_img">
								<!-- 自已定义范围  以及最小运算数  最大运算数 -->
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- //portfolio -->
		<!-- footer -->
		<%- include ../main/bottom %>
</body>

<script>
	var score = 0;
	$(document).ready(function () {
		//初始页面出题设置
		callQuestion(20, 0, 10, 'home');

		//为页面的父签功能生成数据
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			// e.target // 激活的标签页
			score = 0;
			var activeid = (e.target.id);
			if (activeid == 'home-tab') {//首面
				callQuestion(20, 0, 10, 'home');
			} else if (activeid == 'learning-tab') {
				callQuestion(20, 0, 20, 'learning');
			} else if (activeid == 'playing-tab') {
				callQuestion(20, 0, 50, 'playing');
			} else if (activeid == 'painting-tab') {
				callQuestion(30, 0, 100, 'painting');
			}

		})

		//运算处理
		totalNo(score);

		//出题 处理
		$("#ask").click(function (){
			var vals = $(this).parents('div.input-group.input-group-sm').find(":input[type=number]");
			alert(parseInt(vals.eq(0).val()));
			callQuestion(parseInt(vals.eq(0).val()), parseInt(vals.eq(1).val()), parseInt(vals.eq(2).val()), 'school');
			
		});

	});

	//统计分数
	function totalNo(score) {
		if (score == 0) {
			$("#mess").text('快来试一试吧!!!');
		} else if (score > 0) {
			$("#mess").text("共有" + score + "道题答对了");
		}
	}

	function checkRight(t) {
		var f = $(t).parent().find("label:eq(0)").text();
		var s = $(t).parent().find("label:eq(1)").text();
		var t1 = $(t).parent().find("label:eq(2)").text();
		if ((parseInt(f) + parseInt(t1)) == parseInt($(t).val())) {
			$(t).parent().attr("class", "").addClass("label").addClass("label-success");
			$(t).attr("disabled", "disabled");
			score += 1;
			totalNo(score);
			$(t).next("span").text('儿子！你太棒了!!!');
		} else {
			$(t).parent().attr("class", "").addClass("label").addClass("label-danger");
			$(t).next("span").text('加油，相信自己!!!');
		}
	};

	/**
	 * 封装方法，完成切换页面签子页时，动态获取数据方法 
	 */
	function callQuestion(no, min, max, planeid) {
		var info = {
			no: no,
			min: min,
			max: max
		}
		$.post('/createQuest', info, function (data) {

			//完成jquery动态生成页面分栏功能
			var html = "<div class=\"w3agile_banner_info_shuzue\">" +
				"<div class=\"container\">" +
				"<div class=\"col-md-12 column\" style=\"padding-bottom:5px;\">" +
				"<label class=\"label label-info\">" +
				"小朋友，下面这些题你可以做对多少呢！全对了有小花哟!!! 我来帮你记分吧！" +
				"<span id=\"mess\"></span>" +
				"</label>" +
				"</div>" +
				"<div class=\"col-md-12 column\">";

			var l = 3;
			var as = data.question;
			var rows = parseInt(Math.ceil(as.length / l));
			for (var j = 0; j < rows; j++) {
				html += "<div class=\"row clearfix\" style=\"padding-bottom:5px;\">";
				for (var i = (j) * l; i < ((j < rows - 1) ? ((j + 1) * l) : as.length); i++) {
					html += "<div class=\"col-md-4 column\">";
					html += "<span class=\"label label-primary questdivbg\">";
					html += "<label style=\"width:30px;\">"
					html += as[i].first;
					html += "</label>";
					html += "<label>+</label> &nbsp;";
					html += "<label style=\"width:30px;\">"
					html += as[i].second;
					html += "</label> =";
					html += "<input class='label-success' onchange='checkRight(this)' placeholder=\"答案是多少呢！?\" />";
					html += "<span></span>";
					html += "</span>";
					html += "</div>";
				}
				html += "</div>";
			}
			html += "</div>";
			html += "</div>";
			html += "</div>";
			$("#" + planeid).find(".w3_tab_img").html(html);
		});
	}

</script>

</html>